<template>
    <div>
        <div>编辑推荐</div>
        <!-- 歌单列表 -->
        <div class="list">
            <!-- 每一个歌单 -->
            <div class="list-item" v-for="(item, index) in arr" @click="View(item.id)">
                <!-- 图片 -->
                <img :src="item.coverImgUrl" alt="">
                <!-- 文案  -->
                <div>{{ item.name }}</div>
                <!-- 播放量 -->
                <div class="count">{{ item.playCount }}万</div>
            </div>
        </div>
        <div>最新音乐</div>
        <div>
            <Music :list="List" />
        </div>

    </div>
</template>

<script>
import { getuserList, getNewList } from '../api/demo'
export default {
    data() {
        return {
            arr: [],
            List: []
        }
    },
    created() {
        this.getlist(),
            this.getSongs()
    },
    methods: {
        View(e) {
            console.log(e)
            this.$router.push({ name: "Detail", query: { id: e } })
        },
        async getlist() {
            let res = await getuserList()
            this.arr = res.data.playlist.slice(42, 48)
        },
        async getSongs() {
            let res = await getNewList()
            this.List = res.data.result
        }

    }
}
</script>

<style lang="less" scoped>
.list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .list-item {
        width: 32%;

        margin-bottom: 10px;
        position: relative;

        img {
            width: 100%;
        }

        .countf {
            position: absolute;
            top: 0;
            right: 0;
            color: red;
        }
    }
}
</style>